.use-history {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow: auto;
  align-items: center;
  cursor: move;

  position: relative;
  overflow: hidden;
  /* 左右两侧透明度渐变隐藏 */
  mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40px, black calc(100% - 40px), transparent 100%);

  .title {
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  }

  .apps {
    width: 100%;
    flex: 1;
    height: 0;
    display: flex;
    align-items: center;

    .empty {
      margin: 0 auto;
      color: #ffffffd8;
      text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    }

    .history-item {
      cursor: pointer;
      aspect-ratio: 1/1;

      .history-item-title {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .app {
        height: 100%;
        aspect-ratio: 1/1;
        display: flex;
        align-items: center;

        .u-icon {
          width: 36px;
          max-width: 100%;
          aspect-ratio: 1/1;
          margin: 0 auto;
        }
      }
    }
  }
}

/deep/ .history-item .c-content {
  border-radius: 50%;
}

/deep/ .history-item .c-content:hover {
  transform: scale(1.12);
  background: var(--font-color-light) !important;
}